<!--  -->
<template>
	<div class="part">
		<div class="line layout-flex-all">
			<div class="left">
				<picker mode="selector" :range="prefixList" :value="index" @change="changeHandle">
					<div class="prefix">
						+{{ prefix }}
						<i class="iconfont pdxshang2"></i>
					</div>
				</picker>
			</div>
			<div class="center"></div>
			<div class="right">
				<slot name="phone"></slot>
			</div>
		</div>
		<div class="line">
			<slot name="nphone"></slot>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			index: 0,
			prefix: "86",
			prefixList: ["86", "85", "84"],
		}
	},

	components: {},

	computed: {},

	methods: {
		changeHandle(e) {
			this.index = e.detail.value
			this.prefix = this.prefixList[this.index]
			this.$emit("change", this.prefix)
		},
	},
}
</script>
<style lang="scss" scoped>
.part {
	.line {
		padding: 25rpx 0;
		// font-weight: bold;
		font-size: 30rpx;
		border-bottom: 1rpx solid #f6f6f6;
		.left {
			padding-left: 4rpx;
			width: 102rpx;
			i {
				margin-left: 10rpx;
				font-size: 28rpx;
			}
		}
		.center {
			width: 4rpx;
			height: 19rpx;
			background: #333333;
		}
		.right {
			flex: 1;
			padding-left: 20rpx;
		}
	}
}
</style>
